<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <link href="css/login.css" rel="stylesheet">
</head>

<body>
<div id="loginDiv">
    <form id="form" @submit.prevent="onSubmit">
        <h1 id="loginMsg">LOGIN IN</h1>
        <div id="errorMsg">{{ msg }}</div>
        <p>Username:<input id="username" name="username" type="text" v-model="username"></p>
        <p>Password:<input id="password" name="password" type="password" v-model="password"></p>
        <p>Remember:<input id="remember" name="remember" type="checkbox" v-model="remember"></p>
<!--        上面的复选框，勾选是true不勾选是false-->
        <div id="subDiv">
            <input type="submit" class="button" value="Login Up">
            <input type="reset" class="button" value="Reset">&nbsp;&nbsp;&nbsp;
            <a href="register.html">没有账户？立即注册</a>
        </div>
        <br>
        <button class="button" onclick="window.location.href='qq_login.html'">QQ 验证码登录</button>

    </form>
</div>

<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>

<script>

    new Vue({
        el: "#loginDiv",
        data() {
            return {
                msg: '',
                username: '',
                password: '',
                remember: false
            };
        },
        methods: {
            onSubmit() {
                // axios({
                //     method: "get",
                //     url:"http://localhost:8080/brand-case/user/login?username="+this.username+"&password="+this.password+"&remember="+this.remember,

                // }).then(resp => {
                //     if (resp.data === "loginSuccess") {
                //         this.msg = '登录成功，3s后进入主页';
                //         setTimeout(() => {
                //             location.href = "brand2.html";
                //         }, 3000);
                //     } else {
                //         this.msg = '用户名或密码不正确';
                //         setTimeout(() => {
                //             this.msg = '';
                //         }, 3000);
                //     }
                // }).catch(error => {
                //     console.error('Error:', error);
                //     this.msg = '登录请求失败';
                // });
                // console.log(this.username)
                // console.log(this.password)
                // console.log(this.password)

                //get方式 对应的后端/user/login里的方法是独属于get类型的，

                axios.get("http://localhost:8080/brand-case/user/login", {
                    params:{
                        username: this.username,
                        password: this.password,
                        remember: this.remember
                    },
                }).then(resp => {
                    if (resp.data === "loginSuccess") {
                        this.msg = '登录成功，3s后进入主页';
                        setTimeout(() => {
                            location.href = "brand2.html";
                        }, 3000);
                    } else {
                        this.msg = '用户名或密码不正确';
                        setTimeout(() => {
                            this.msg = '';
                        }, 3000);
                    }
                }).catch(error => {
                    console.error('Error:', error);
                    this.msg = '登录请求失败';
                });

                //post方式 对应的后端/user/login里的方法是独属于post类型的，

                // axios.post("http://localhost:8080/brand-case/user/login", {
                //     data:{
                //             username: this.username,
                //             password: this.password,
                //             remember: this.remember
                //     },
                // }).then(resp => {
                //     if (resp.data === "loginSuccess") {
                //         this.msg = '登录成功，3s后进入主页';
                //         setTimeout(() => {
                //             location.href = "brand2.html";
                //         }, 3000);
                //     } else {
                //         this.msg = '用户名或密码不正确';
                //         setTimeout(() => {
                //             this.msg = '';
                //         }, 3000);
                //     }
                // }).catch(error => {
                //     console.error('Error:', error);
                //     this.msg = '登录请求失败';
                // });

            }
        }
    });
</script>
</body>
</html>


